/**
 * 1. Route 移除了 component，改为使用 element
 *    且 element 需要的内容为一个 React元素
 *    且 给到 Route 渲染的组件，不会自动收到路由相关的三个Prop了。（更推荐使用hooks）
 *
 * 2. 新增 Routes 组件，用于包裹 Route 组件，
 *    移除了 Switch 组件，采用 Routes 来代替 Switch
 *    且 Routes 下只能是 Route
 *
 * 3. 更新了路由匹配的算法，不需要去管 Route 的编写顺序了。
 *    ？？？ 怎么升级了？？？
 *
 * 4. 新增了 Navigate 组件，用于做路由跳转
 *    移除了 Redirect 组件，采用 Navigate 来代替
 *
 *    PS: Navigate 不是替换路由模式，只是一种简单的跳转
 *        如果需要更像 Redirect , 则需要传递一个 replace 属性
 *
 * 5. 移除 NavLink 组件的 activeClassName 移除，需要高亮的话，得给 className 传递函数来实现。
 *
 * 6. 嵌套路由的语法修改
 *
 * 7. 新增 Outlet 组件，用于子路由占坑
 *
 * 8. Route 组件，增加一个 index 属性，表示默认子路由
 */

import { Route, Routes, Navigate, Link, NavLink } from "react-router-dom";
import Contact from "./pages/Contact";
import Home from "./pages/Home";
import About from "./pages/About";

export default function App() {
  return (
    <div>
      <h1>App</h1>

      <ul>
        <li>
          <NavLink
            className={({ isActive }) => (isActive ? "hello" : "")}
            to="/contact"
          >
            go /contact
          </NavLink>
        </li>
        <li>
          <NavLink
            className={({ isActive }) => (isActive ? "hello" : "")}
            to="/about"
          >
            go /about
          </NavLink>
        </li>
        <li>
          <NavLink
            className={({ isActive }) => (isActive ? "hello" : "")}
            to="/abcd"
          >
            go /abcd
          </NavLink>
        </li>
      </ul>

      <hr />

      <Routes>
        <Route path="/" element={<Home />}>
          <Route index element={<h3>默认子路由</h3>} />
          <Route path="/console" element={<h3>Console</h3>} />
          <Route path="/workplace" element={<h3>Workplace</h3>} />
        </Route>
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/abcd" element={<Navigate to="/about" replace />} />
      </Routes>
    </div>
  );
}
